import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import './Welcome.css';

const Welcome = () => {
  const navigate = useNavigate();
  const [countdown, setCountdown] = useState(3);

  useEffect(() => {
    const timer = setInterval(() => {
      setCountdown((prev) => {
        if (prev <= 1) {
          clearInterval(timer);
          navigate('/login');
          return 0;
        }
        return prev - 1;
      });
    }, 1000);

    return () => clearInterval(timer);
  }, [navigate]);

  const handleSkip = () => {
    navigate('/login');
  };

  return (
    <div className="welcome-container">
   

      {/* 跳过按钮 */}
      <button className="skip-button" onClick={handleSkip}>
        跳过 {countdown}
      </button>

      {/* 主图区域 */}
      <div className="welcome-image">
        <img src="/src/assets/20.jpg" alt="Welcome" />
      </div>

      {/* 底部 Logo */}
      
    </div>
  );
};

export default Welcome; 